<template>
  <div class="buyTicket">
    <div class="ticket-introduce cenLeft">
      <div class="ticket-introduce-con">
        <div @click.self="goDetail()" class="con-tit-box cenBet">
          <div @click.stop="ticketSelect()" class="con-tit cenCen">
            <div :class="{'selThis':ticket.isSelect}" class="con-tit-sel  cenCen">
              <img v-if="ticket.isSelect" src="https://img.alicdn.com/tfs/TB1su6aa3aH3KVjSZFjXXcFWpXa-200-200.png">
            </div>
            {{ticket.tTypeName}}
          </div>
          <div @click="goDetail()" v-if="(isActive==1&&ticket.activeDate)||(isActive==0&&ticket.shareTime)" class="con-data">
            {{isActive==1?'激活时间：':'分享时间：'}}
            {{isActive==1? $timeM(ticket.activeDate):$timeM(ticket.shareTime)}}
          </div>
        </div>
        <div @click.self="goDetail()" v-if="isActive" class="ticket-code ">
          {{ticket.uName}} {{ticket.uTel}}
        </div>
        <div @click.self="goDetail()" v-else class="ticket-code ">
          {{ticket.inviteCode}}
        </div>
        <!-- v-if="isActive==0" -->
        <div class="ticket-equity ">
          <!-- <div class="ticket-equity-tit" @click.stop="isEdit()" v-if="!ticket.isEdit">{{ticket.detail?ticket.detail:'点击填写备注'}}</div> -->
          <!-- v-else -->
          <input @click.stop="isEdit()" @blur.prevent="editChange()" v-model.trim="ticket.buyerRemark" class="ticket-equity-tit" maxlength="20" placeholder="点击填写备注">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["ticket", "isActive", "index"], // ticket票详情   isActive是否激活   index 当前票的索引
  methods: {
    goDetail() {
      this.$parent.goDetail(this.ticket);
    },
    // 调取父组件方法，选择后者取消选择
    ticketSelect() {
      this.$parent.ticketSelect("son", this.index);
    },
    // 点击可以编辑详情事件
    isEdit() {
      this.$parent.isEdit(this.index);
    },
    // 当前编辑离开以后提交编辑内容
    editChange() {
      this.$parent.editChange(
        this.index,
        this.ticket.ticketId,
        this.ticket.buyerRemark
      );
    }
  }
};
</script>

<style scoped>
.buyTicket {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(61, 61, 61, 0.8);
  border-radius: 4px;
  padding: 18px;
  margin-top: 16px;
}
.ticket-introduce {
  width: 100%;
  height: auto;
  align-items: flex-start;
  position: relative;
}
.ticket-introduce-con {
  width: 100%;
  height: auto;
  min-height: 130px;
}
.con-tit-box {
  width: auto;
  height: auto;
  flex-wrap: wrap;
  border-bottom: 1px solid #38393b;
  margin-bottom: 13px;
  padding-bottom: 10px;
}
.con-tit-sel {
  width: 26px;
  height: 26px;
  border: 1px solid #636566;
  background: rgba(33, 35, 37, 0.3);
  font-size: 16px;
  color: #eeeeee;
  cursor: pointer;
  margin: 0px 16px 0px 2px;
}
.con-tit-sel > img {
  width: 70%;
  height: auto;
}
.selThis {
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
  color: #fff !important;
  border: none;
}
.con-tit {
  /* font-family: PingFangSC-Medium; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  margin-right: 16px;
}
.con-data {
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #eeeeee;
  text-align: left;
}

.ticket-code,
.ticket-equity {
  width: 100%;
  height: 40px;
  text-align: left;
  opacity: 0.6;
  font-size: 22px;
  color: #ffffff;
}
.ticket-code {
  opacity: 1;
}
.ticket-equity-tit {
  width: 100%;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-size: 22px;
  color: #ffffff;
}
</style>
